<style>
        body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: #fff8ec; color: #2d2d2d; }

        header { background: #ffb347; color: #fff; padding: 40px 20px 20px 20px; text-align: center; }
        header h1 { margin: 0; font-size: 2.5em; letter-spacing: 2px;}
        header p { font-size: 1.2em; margin: 10px 0 0 0;}

        nav { background: #f77f00; padding: 10px 0; text-align: center;}
        nav a { color: #fff; text-decoration: none; margin: 0 20px; font-weight: bold;}

        section { max-width: 900px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px #f7c87355;}

        h2 { color: #f77f00; margin-top: 0;}
        .produit { display: flex; flex-wrap: wrap; align-items: center;}
        .produit img { width: 260px; border-radius: 16px; margin-right: 40px; box-shadow: 0 2px 12px #f7c87355;}
        .atouts, .saveurs { margin: 0 0 20px 0;}
        .atouts li { margin-bottom: 8px;}
        .saveurs span { background: #f7c873; color: #fff; border-radius: 8px; padding: 4px 12px; margin-right: 8px; display: inline-block; margin-bottom: 6px;}
        
footer { background: #f77f00; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px;}
        @media (max-width: 700px) {
            .produit { flex-direction: column; }
            .produit img { margin: 0 0 20px 0; width: 100%;}
        }

table {
  border-collapse: collapse;   width: 100%; }

th, td {
  border: 1px solid #333; 
  padding: 8px;           
  text-align: left;       
}

th {background-color: #f79e32;}
    </style>